<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">生生互评</div>
      <div class="select">
        <el-select v-model="selectItem" placeholder="请选择任务">
          <el-option v-for="item in periodList" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </div>
      <div class="sn-body">
        <div class="">
          <div class="pd-main">
            <div id="chart1" class="chart-1"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "peerReview",
  props: {
    allData: {
      type: Array,
      default() {
        return [];
      },
    },
    dictData: {
      type: Array,
      default() {
        return [];
      },
    },
    currentStudent: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      timer: null,
      number: null,
      arr: [],
      periodList: [],
      selectItem: "",
      num: 0,
      chartData: [],
      xAxiosNames: [],
    };
  },
  watch: {
    allData: {
      handler() {
        this.getData();
      },
      deep: false,
    },
    selectItem: {
      handler(val) {
        if (val) {
          this.getEchart();
        }
      },
      deep: true,
    },
    // currentStudent: {
    //   handler(val) {
    //     val && this.getData();
    //   },
    //   deep: false,
    // },
  },
  mounted() {
    // this.getEchart();
  },
  methods: {
    getData() {
      const list = this.allData.filter(
        (el) =>
          ["0", "1", "2"].includes(el.scoreType) &&
          el.stuName === this.currentStudent.stuName
      );
      this.chartData = list;
      if (list.length > 0) {
        this.xAxiosNames = list.map((el) => el.period);
        // this.arr = list[0].subjectName.map((el, key) => {
        //   return { subjectName: el, score: list[0].score[key] };
        // });
        const temp = [];
        list
          .map((el) => el.period)
          .forEach((el) => {
            if (!temp.includes(el)) {
              temp.push(el);
            }
          });
        this.periodList = temp.sort((a, b)=> a.localeCompare(b, 'zh')); //a~z 排序  
        this.selectItem = this.periodList[0];
      } 
      // this.initData();
    },
    initData() {
      this.num = 0;
      // this.timer = setInterval(() => {
      //   this.switchItem();
      // }, 3000);
      this.switchItem();
    },
    switchItem() {
      this.num += 1;
      if (this.num > this.periodList.length - 1) {
        this.num = 0;
      }
      const period = this.periodList[this.num];
      this.selectItem = period;
    },
    getEchart() {
      // eslint-disable-next-line no-undef
      let myChart = echarts.init(document.getElementById("chart1")); // 图标初始化
      let dataScore = this.chartData.filter(el=> el.period === this.selectItem).map((el) => {
        const obj = {};
        obj.scoreType = el.scoreType;
        obj.scoreTypeName = el.scoreTypeName;
        let num = 0;
        el.score.forEach((f, i) => {
          if (i < el.subjectName.length) {
            num += Number(f);
          }
        });
        obj.score = (num / el.subjectName.length).toFixed(1);
        return obj;
      });
      const data = dataScore.map(el => ({ value: el.score, name: el.scoreTypeName }))
      const option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
          textStyle: { //图例文字的样式
            color: '#fff',
            fontSize: 12
          },
        },
        color: ['#fc8251', '#5470c6', '#9A60B4'],
        // color: ['#fc8251', '#5470c6', '#9A60B4', '#ef6567', '#f9c956', '#3BA272'],
        series: [
          {
            name: "",
            type: "pie",
            radius: ["30%", "50%"],
            labelLine: {
              normal: {
                show: true,//控制线条显示
                length: 18,
                length2: 50,
                lineStyle: {
                  color: '#333'
                }
              }
            },
            avoidLabelOverlap: true,
            padAngle: 10,
            itemStyle: {
              borderRadius: 10,
              borderWidth: 15, //设置border的宽度有多大 
              backgroundColor: 'rgba(7,81,112,0)'
            },

            label: {
              normal: {
                position: 'outer',// 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）
                // \n\n可让文字居于牵引线上方，很关键
                //  {b}  代表显示的内容标题
                // {c}代表数据
                formatter: ' {b}：{c} \n\n', 
                borderWidth: 15,
                borderRadius: 4,
                padding: [0, -60],
                rich: {
                  a: {
                    color: '#333',
                    fontSize: 12,
                    lineHeight: 20
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#333'
                  }
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: "bold",
              },
            },
            data,
          },
        ],
      };
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.sn-container {
  left: 23px;
  top: 74px;
  height: 535px!important;

  .pd-main {
    position: absolute;
    height: 100%;
    width: 100%;

    [class^="chart"] {
      position: absolute;
      -webkit-transform-origin: left top;
      -moz-transform-origin: left top;
      -ms-transform-origin: left top;
      -o-transform-origin: left top;
      transform-origin: left top;
    }

    .chart-1 {
      width: 410px;
      height: 410px;
      top: 45%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -40%);
    }
  }
}

.select {
  position: absolute;
  right: 0;
}
</style>
